<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js

class Weather extends React.Component{
    // constructor调用几次？---1次，初始的时候
    constructor(props) {
        console.log('constructor')
        super(props);
        this.state={
            isHot:true,
            wind:'微风'
        }
        // 解决changeWeater的this指向问题
        this.changeWeather=this.changeWeather.bind(this)
    }


    // changeWeather调用几次？---n次,n为改变了几次页面，
    changeWeather(){
        console.log('changeWeather')
        //changeWeather放在哪里?---Weather的原型对象上，供实例使用
        //由于changeWeather是作为onclick的回调，所以不是通过实例调用的，是直接调用
        //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined


        // 获取原来的isHot
        const isHot=this.state.isHot
        // 修改state里的数据不能直接更改
        // this.state.isHot=!isHot
        // 需要调用内置api--setState进行更改，而且是一种合并，不是替换
        this.setState({isHot: !isHot})
    }

    // render调用几次？---1+n次,1为初始的时候,n为改变了几次页面，
    render(){
        console.log('render')
        const {isHot,wind}=this.state
        return  <h2 onClick={this.changeWeather}>今天天气很{isHot===true?'炎热':'凉爽'},{wind}</h2>
    }
}
ReactDOM.render(<Weather/>,document.getElementById('container'))

</script>